<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>进程模块</span>
          <el-button class="button" text @click.stop="openDetail">
            {{ showDetail ? '收起' : '查看详情' }}
          </el-button>
        </div>
      </template>
      <div class="text item">
        <h3>总体进度</h3>
        <el-button :icon="Refresh" circle @click="fetchProcess" />
        <el-progress :text-inside="true" :stroke-width="26" :percentage="processSet.total_process"
          color="linear-gradient(45deg, #FFD700,#e0ef3ad8)" />
      </div>
    </el-card>
    <transition name="expand">
      <div v-if="showDetail" class="detail-content">
        <h2>进程模块的详细信息</h2>
        <el-divider></el-divider>
        <table class="process-table">
          <!-- 将所有 <tr> 元素包裹在 <tbody> 内。这样不仅符合 HTML 规范，还可以消除 Vite 的警告 -->
          <tbody>
            <tr>
              <td class="process-text">软件开发率（PDR）: {{ processSet.pdr_process }}%</td>
              <td class="process-chart">
                <div class="bar-chart">
                  <div class="bar" :style="{ '--percentage': processSet.pdr_process + '%' }">
                    <span>{{ processSet.pdr_process }}%</span>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td class="process-text">开发因素（RDF）: {{ processSet.rdf_process }}%</td>
              <td class="process-chart">
                <div class="bar-chart">
                  <div class="bar" :style="{ '--percentage': processSet.rdf_process + '%' }">
                    <span>{{ processSet.rdf_process }}%</span>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td class="process-text">软件因素（SWF）: {{ processSet.swf_process }}%</td>
              <td class="process-chart">
                <div class="bar-chart">
                  <div class="bar" :style="{ '--percentage': processSet.swf_process + '%' }">
                    <span>{{ processSet.swf_process }}%</span>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td class="process-text">风险评估（RSK）: {{ processSet.rsk_process }}%</td>
              <td class="process-chart">
                <div class="bar-chart">
                  <div class="bar" :style="{ '--percentage': processSet.rsk_process + '%' }">
                    <span>{{ processSet.rsk_process }}%</span>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td class="process-text">最终造价: {{ processSet.cost_process }}%</td>
              <td class="process-chart">
                <div class="bar-chart">
                  <div class="bar" :style="{ '--percentage': processSet.cost_process + '%' }">
                    <span>{{ processSet.cost_process }}%</span>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <el-divider></el-divider>
        <el-button @click="closeDetail" class="close-button" type="primary" size="large">关闭</el-button>
      </div>
    </transition>
  </div>
</template>


<script setup lang="ts">
import { ref } from 'vue';
import { currentProjectTask } from './Variables/costVariables';
import { getProcess } from '../../api/Cost/costApi';
import { Refresh } from '@element-plus/icons-vue';

const showDetail = ref(false);

const processSet = ref({
  pdr_process: 0,
  rdf_process: 0,
  swf_process: 0,
  rsk_process: 0,
  cost_process: 0,
  total_process: 0
});
const task = ref();

const fetchProcess = async () => {
  const res = await getProcess(currentProjectTask.projectId);
  processSet.value = res.data;
  task.value = res.task;
};
fetchProcess();

const openDetail = () => {
  showDetail.value = true;
};

const closeDetail = () => {
  showDetail.value = false;
};
</script>

<style scoped>
.box-card {
  background-color: #fffb0026;
  border: 1px solid #f0eec4;
  border-radius: 12px;
  padding: 20px;
  height: 260px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.box-card::before {
  content: '☞';
  font-size: 200px;
  color: rgba(241, 204, 71, 0.742);
  position: absolute;
  font-weight: bold;
  bottom: 0.1px;

  left: 10px;
  pointer-events: none;
}

.box-card:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 25px;
  font-weight: bold;
}

.text {
  font-size: 16px;
  margin-top: 10px;
}

.el-progress {
  margin-top: 20px;
  /* 调整进度条的位置 */
  height: 26px;
  background: #f0f0f0;
  border-radius: 13px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.el-progress-bar {
  border-radius: 13px;
  background: linear-gradient(45deg, #FFD700, #FFA500) !important;
  /* 确保为黄色 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.detail-content {
  position: fixed;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  background-color: #fff;
  z-index: 1000;
  padding: 20px;
  overflow: auto;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transform: scale(1);
  opacity: 1;
  transition: all 0.5s ease;
}

.expand-enter-active,
.expand-leave-active {
  transition: all 0.5s ease;
}

.expand-enter,
.expand-leave-to {
  transform: scale(0.8);
  opacity: 0;
}

.close-button {
  position: absolute;
  top: 20px;
  right: 20px;
}

.el-divider {
  margin: 20px 0;
}

.process-table {
  width: 100%;
  border-collapse: collapse;
}

.process-text {
  font-size: 16px;
  padding: 10px;
  text-align: left;
}

.process-chart {
  padding: 10px;
  text-align: right;
  width: 70%;
}

.bar-chart {
  width: 100%;
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.bar {
  width: var(--percentage);
  height: 100%;
  background: linear-gradient(to right, #e3424278, #55f04a98);
  color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  transition: width 0.5s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 50px;
}

.bar span {
  font-size: 12px;
  color: #fff;
}
</style>
